<template>
  <div>
    <!-- 页面内容，根据品牌名展示品牌详情 -->
    <h1 class="brand-title">{{ this.$route.params.brandName }}</h1>
    <!-- 其他详情内容 -->
    <!-- 使用Element UI组件，并设置样式使其并列显示 -->

    <el-form label-position="left" class="inline-form" style="margin-left: 20px; display: flex; flex-wrap: nowrap;">
      <!-- 省份输入 -->
      <el-form-item label="省份" prop="province" style="margin-right: 150px;display: flex;">
        <el-input v-model="brandInfoDto.province" placeholder="请输入省份" clearable :validate-event="false"
          @input="validateProvinceInput" :class="{ 'invalid-input': isProvinceInvalid }"></el-input>
        <p v-if="isProvinceInvalid" class="error-tip">请输入有效的省份名称或“全国”</p>
      </el-form-item>

      <!-- 时间范围选择 -->
      <!-- 开始时间 -->
      <el-form-item label="开始时间 (年月)" style="margin-right: 50px;display: flex;">
        <el-date-picker v-model="brandInfoDto.dateStart" type="month" placeholder="选择开始月份" format="yyyy-MM"
          value-format="yyyy-MM"></el-date-picker>
      </el-form-item>

      <!-- 结束时间 -->
      <el-form-item label="结束时间 (年月)" style="margin-right: 100px;display: flex;">
        <el-date-picker v-model="brandInfoDto.dateEnd" type="month" placeholder="选择结束月份" format="yyyy-MM"
          value-format="yyyy-MM"></el-date-picker>
      </el-form-item>

      <!-- 查询按钮 -->
      <el-form-item>
        <el-button type="primary" @click="fetchBrandDetail">查询</el-button>
      </el-form-item>
    </el-form>


    <div class="chart-container">
      <div class="charts-wrap">
        <div ref="carchart" :style="{ width: '60%', height: '600px' }"></div>
        <!-- <div ref="provincechart" :style="{ width: '60%', height: '600px' }"></div> -->
        <el-button type="primary" @click="switchChartType">切换图表类型</el-button>
        <div ref="chartContainer" style="width: 60%; height: 600px;"></div>
        <!-- 添加切换图表类型的按钮 -->
      </div>
      <div class="image-wrap" id='wordcloud'>
        <!-- <img :src="imagePath" alt="示例图片" class="chart-image" /> -->
        <div ref="wordcloudChart" :style="{ width: '80%', height: '600px' }" class="chart-image"></div>
      </div>
      <div class="card">
        <div class="indent">
          可以看到销量分布整体呈现北少南多的状况，广东和江浙沪地区销量遥遥领先，一是因为沿海地区
          气候炎热，新能源汽车的电池能充分释放性能；二是整体经济较发达，人均
          可支配收入更高，因此有更多的钱去购买新能源汽车；三是沿海地区人思想开放，接受
          新鲜事物的程度比较高，因此对于新能源车持更包容接纳的态度。此外，东北地区
          销量低迷的原因很大程度上是由于当地气温较低，且低温时间较长，不利于电池发挥
          性能，因此新能源车不受欢迎。而西北地区销量低迷的原因有很多，一是因为当地经济
          相较东南沿海等地区更不发达，人均可支配收入更少，对新能源汽车的负担能力较差；
          二是因为西北多沙漠，过于干燥，不利于新能源汽车电池充分发挥效能。沿海地区普遍
          比内陆地区销量更高，因此建议车企可以在销量多的地方如广东、长三角等地区多多建厂，
          拉高产能，增加购买车补，这样能近一步刺激消费者的消费心理，从而提高销量；在销量低
          的地区可以适当减少产能，降低成本，找准当地的热销车型，从而更好的调整生产结构，有
          针对性的提高整体效益。
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import axios from 'axios';
import * as echarts from 'echarts';
import 'echarts-wordcloud'; // 导入 ECharts WordCloud 扩展


export default {
  name: 'BrandDetailByName',
  data() {
    return {
      typeKey: 'map', // 初始化为地图图表类型
      currentOption: this.mapOption, // 初始化为地图图表配置
      chart: null, // 初始化图表实例变量
      provinces: [], // 中国省份名称数组
      values: [], // 对应的数据值数组
      mapJsonPath: require('@/assets/geo/China.json'), // 修改为本地JSON文件的导入路径
      imagePath: require('@/assets/byd.jpg'),
      isProvinceInvalid: false, // 用于记录省份输入是否无效
      validProvinces: [
        "全国",
        "北京",
        "天津",
        "河北",
        "山西",
        "内蒙古",
        "辽宁",
        "吉林",
        "黑龙江",
        "上海",
        "江苏",
        "浙江",
        "安徽",
        "福建",
        "江西",
        "山东",
        "河南",
        "湖北",
        "湖南",
        "广东",
        "广西",
        "海南",
        "重庆",
        "四川",
        "贵州",
        "云南",
        "西藏",
        "陕西",
        "甘肃",
        "青海",
        "宁夏",
        "新疆",
        "台湾",
        '香港',
        '澳门',
      ], // 33个省份列表
      brand: null, // 假设的品牌对象
      brandInfoDto: {
        brandName: 'bya', // 传递品牌名为查询参数
        province: '全国', // 假设的省份
        dateStart: '2022-06', // 假设的起始日期
        dateEnd: '2024-04', // 假设的结束日期
      },
      caroption: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['新能源车型销售排行榜']
        },
        // 将原来的xAxis配置改为yAxis，并做适当调整
        yAxis: {
          type: 'category',
          data: ['排名1', '排名2', '排名3', '排名4', '排名5'],
          name: '排名',
          nameLocation: 'end',
          nameGap: 30,
          axisLabel: {
            show: true,
            align: 'right',
            rotate: 0,
            margin: 10,
            fontSize: 10
          },
          inverse: true
        },
        // 将原来的yAxis配置改为xAxis，并改为数值轴
        xAxis: {
          type: 'value',
          name: '数值',
          splitLine: {
            show: false
          }
        },
        series: [
          {
            name: '新能源车型销售排行榜',
            // 改为水平柱状图
            type: 'bar',
            // 水平布局时，宽度应基于y轴，这里设置为自适应，也可以指定固定高度
            barCategoryGap: '100%',
            // 或者使用barWidth来设置固定高度，根据需求选择
            barWidth: '15px',
            data: [100, 80, 60, 40, 20],
            itemStyle: {
              color: 'blue',
              label: {
                // 由于图变为横向，位置也应调整为左侧或右侧
                position: 'left',
              }
            },
            animationDurationUpdate: 1000
          }
        ]
      },
      provinceoption: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['全国省份销量排行榜']
        },
        // 将原来的xAxis配置改为yAxis，并做适当调整
        yAxis: {
          type: 'category',
          data: ['排名1', '排名2', '排名3', '排名4', '排名5'],
          name: '排名',
          nameLocation: 'end',
          nameGap: 30,
          axisLabel: {
            show: true,
            align: 'right',
            rotate: 0,
            margin: 10,
            fontSize: 10
          },
          inverse: true
        },
        // 将原来的yAxis配置改为xAxis，并改为数值轴
        xAxis: {
          type: 'value',
          name: '数值',
          splitLine: {
            show: false
          }
        },
        series: [
          {
            name: '全国省份销量排行榜',
            id: 'saleCount',
            // 改为水平柱状图
            type: 'bar',
            // 水平布局时，宽度应基于y轴，这里设置为自适应，也可以指定固定高度
            barCategoryGap: '100%',
            // 或者使用barWidth来设置固定高度，根据需求选择
            barWidth: '10px',
            data: [100, 80, 60, 40, 20],
            itemStyle: {
              color: 'blue',
              label: {
                // 由于图变为横向，位置也应调整为左侧或右侧
                position: 'left',
              }
            },
            animationDurationUpdate: 1000,
            universalTransition: true
          }
        ]
      },
      mapOption: {
        tooltip: {
          // 触发类型，'item' 表示数据项图形触发，适用于散点图、饼图、地图等
          trigger: 'item',
          // 提示框浮层内容格式器，支持字符串模板和回调函数两种形式
          formatter: function (params) {
            // params 包含了当前鼠标悬停的数据项信息
            return `${params.name} : ${params.value}`; // 自定义提示内容，例如显示地区名称和值
          },
          // 更多配置，如背景色、字体大小等
          backgroundColor: 'rgba(50,50,50,0.7)',
          textStyle: {
            color: '#fff',
            fontSize: 14,
          },
        },
        visualMap: {
          type: 'continuous',
          left: 'right',
          min: 500000,
          max: 38000000,
          inRange: {
            // prettier-ignore
            color: ['#313695', '#ffffbf', '#f46d43', '#d73027', '#a50026']
          },
          text: ['High', 'Low'],
          calculable: true
        },
        series: [
          {
            id: 'saleCount',
            type: 'map',
            roam: false,
            map: 'China',
            center: ['9%', '5%'],
            animationDurationUpdate: 1000,
            universalTransition: true,
            data: [{ name: '北京', value: 4822023 },
            { name: '上海', value: 731449 },]
          }
        ]
      }
    };
  }, mounted() {
    this.fetchBrandDetail();
    this.fetchWordCloudData();
    // this.provinceChart = echarts.init(this.$refs.provincechart);
  },
  created() {
    this.brandInfoDto.brandName = this.$route.params.brandName
    this.fetchBrandDetail();
  },
  methods: {
    fetchWordCloudData() {
      const getOptions = {
        method: 'GET',
        url: '/api/task3/wordCloud',
        params: {
          name: this.brandInfoDto.brandName
        }
      };

      axios(getOptions)
        .then(response => {
          console.log('Received data:', response.data);
          this.initWordCloudChart(response.data.data);
        })
        .catch(error => {
          console.error('Error fetching word cloud data:', error);
        });
    },
    initWordCloudChart(data) {
      const chartInstance = echarts.init(this.$refs.wordcloudChart);
      const option = {
        series: [
          {
            type: 'wordCloud',
            gridSize: 10,
            sizeRange: [12, 60],
            rotationRange: [0, 0],
            textPadding: 0,
            autoSize: {
              enable: true,
              minSize: 14,
            },
            data: data.map((item) => {
              const [word] = Object.keys(item); // 提取对象的第一个键作为word
              const frequency = item[word]; // 获取对应的值作为frequency
              return { name: word, value: frequency };
            }),
          }
        ]
      };
      chartInstance.setOption(option);
    },


    switchChartType() {
      if (this.typeKey === 'map') {
        this.typeKey = 'bar';
        this.currentOption = this.provinceoption; // 假设provinceoption是你的柱状图配置
      } else {
        this.typeKey = 'map';
        this.currentOption = this.mapOption;
      }

      // 确保图表实例已经初始化
      if (!this.chart) {
        this.chart = echarts.init(this.$refs.chartContainer);
      }

      this.chart.setOption(this.currentOption, true); // 第二个参数为true表示保留当前的动画状态
    },
    validateProvinceInput() {
      // 验证省份输入是否合法
      const isValid = this.validProvinces.includes(this.brandInfoDto.province);
      this.isProvinceInvalid = !isValid;
    },
    fetchBrandDetail() {
      if (this.isProvinceInvalid) {
        // 如果省份输入无效，不发送请求
        return;
      }
      console.log('Sending request with data:', this.brandInfoDto);
      axios.post('/api/task3/saleInfo', this.brandInfoDto, { // 假定的API路径
      })
        .then(response => {
          console.log('Response:', response.data);
          this.caroption.yAxis.data = response.data.data.carNames;
          this.caroption.series[0].data = response.data.data.carSaleCounts;
          this.carchartInstance = echarts.init(this.$refs.carchart); // 使用 this.$refs.charts 获取 DOM 元素  
          this.carchartInstance.setOption(this.caroption);
          this.provinces = response.data.data.provinceNames;
          this.values = response.data.data.provinceSaleCounts;
          const chinaJson = this.mapJsonPath;
          echarts.registerMap("China", chinaJson);

          const mapData = this.provinces.map((province, index) => ({
            name: province,
            value: this.values[index],
          }));
          this.mapOption.series[0].data = mapData;
          this.mapOption.visualMap.max = Math.max(...mapData.map(item => item.value));
          this.mapOption.visualMap.min = Math.min(...mapData.map(item => item.value));
          this.provinceoption.yAxis.data = this.provinces
          this.provinceoption.series[0].data = mapData.map(function (item) {
            return item.value;
          });
          this.switchChartType();
          /*           this.chart = echarts.init(this.$refs.chartContainer);
                    this.chart.setOption(this.mapOption);
                    this.provincechartInstance = echarts.init(this.$refs.provincechart); // 使用 this.$refs.charts 获取 DOM 元素  
                    this.provincechartInstance.setOption(this.provinceoption); */
        })
        .catch(error => {
          console.error('Error fetching brand by name:', error);
          this.brand = null;
        });
    },
  },
};
</script>

<style scoped>
.invalid-input {
  border-color: red;
  /* 当输入无效时，边框变红 */
}

.error-tip {
  color: red;
  /* 错误提示文字为红色 */
  margin-top: 5px;
}

.chart-container {
  display: flex;
  flex-direction: column;
  /* 改变排列方向为列 */
  align-items: stretch;
  /* 可选，使图表宽度默认拉伸至容器宽度 */
}

.chart-image {
  position: absolute;
  /* 设置图片为绝对定位 */
  left: 80%;
  /* 相对于包含块（这里是.image-wrap）左边界的水平偏移量 */
  top: 70%;
  /* 相对于包含块上边界的垂直偏移量 */
  transform: translate(-50%, -50%);
  /* 通过transform居中图片，减去自身宽高的50% */
  max-width: 50%;
  /* 图片宽度不超过容器宽度 */
  height: auto;
  /* 保持图片原始宽高比 */
}

#wordcloud {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

.card {
  background-color: rgb(221, 218, 218);
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin: 10px;
  max-width: 35%;
  flex-grow: 1;
  /* 让卡片自动填充容器宽度 */
  /* 如果需要限制卡片最大宽度以防止过度拉伸，可以添加如下属性：
  max-width: 25%; // 或者根据实际需要设定其他百分比
  */
  display: flex;
  flex-direction: column;
  position: relative;
  top: -600px;
  /* 向下移动10像素 */
  left: 900px;
  /* 向右移动20像素 */
  /* 保证卡片内部元素垂直排列 */
}
</style>